<template>
    <div>
        <div id="main" class="main_box"></div>
    </div>
</template>

<script setup lang="ts">
import { ECharts, EChartsOption, init } from 'echarts';
import { onMounted } from 'vue';
const props = defineProps({
    data: {
        type: Array,
        defalut: () => { }
    }
})
onMounted(() => {
    const yesterdayChartData = props.data
    // 表1
    const charEle = document.getElementById('main') as HTMLElement;
    const charEch: ECharts = init(charEle);
    const option: EChartsOption = {
        title: {
            text: '昨日医疗耗材占比',
            left: 'center'
        }, 
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [40, 200],
                center: ['50%', '55%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: yesterdayChartData
            }
        ]
    };
    charEch.setOption(option);
})
</script>

<style scoped lang="scss">
.main_box {
    width: 700px;
    height: 500px;
    // border: 1px solid #ccc;
}
</style>